<template>
	<view class="container">
		<view class="syslist">
			<block v-for="(item, index) in sysList" :key="index">
				<view class="item flex-row" @tap="toDetail(item)">
					<view class="cover flex-row flex-column">
						<image :src="item.userFace" class="icon"></image>
					</view>
					<view class="title">
						<view class="main flex-row">
							<text  class="text">{{ item.name }}</text>
						</view>
						<view  class="sub text-ellipsis">{{ item.content }}</view>
					</view>
				</view>
			</block>
		</view>
		<view class="" style="padding: 10rpx;line-height: 1.5;">
			会话消息
		</view>
		<scroll-view scroll-y class="list">
			<view class="space" @tap="closeSwipe"></view>
			<block v-for="(item, index) in list" :key="index">
				<view class="item flex-row" @tap="toDetail(item)">
					<view class="cover flex-row flex-column">
						<image  src="@/static/lg.png" class="icon"></image>
					</view>
					<view class="title">
						<view class="main flex-row">
							<text  class="text">{{ item.name }}</text>
							<!-- <text class="time">{{ item.date }}</text> -->
						</view>
						<view  class="sub text-ellipsis">{{ item.content }}</view>
					</view>
				</view>
			</block>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f9828a'
					}
				}],
				posRight: '15px',
				userId: uni.getStorageSync('userId') || '',
				list: [{
					groupFace: "",
					type: "single",
					userFace: "",
					name: "客户1",
					telephone: "123123123",
					content: "你好",
					date: "2015-12-01"
				}],
				sysList: [{
					type: "single",
					userFace: "../../static/order/mes.png",
					// unReadNumebr: "1",
					name: "系统通知",
					content: "你好，师傅。",
					date: "2015-12-01"
				}, {
					type: "single",
					userFace: "../../static/order/peo.png",
					// unReadNumebr: "1",
					name: "在线客服",
					content: "你好，师傅。",
					date: "2015-12-01"
				}, ]
			}
		},
		onShow() {
			return false
			// 监听是否连接成功
			this.$xbcim.onsuccess(() => {
				console.log('连接成功')
			})

			// 监听连接是否错误
			this.$xbcim.onerror((error) => {
				console.log('error', error)
			})

			// 监听Sockect是否断开
			this.$xbcim.onclose(() => {
				console.log('连接断开')
			})

			// 接收消息
			this.$xbcim.onmessage(data => {
				this.list = this.list.map(item => {
					switch (item.type) {
						case 'group': // 群消息
							if (data.type == 'group' && item.groupId == data.target) {
								item.content = data.content
								item.date = '刚刚'
							}
							break
						case 'single': // 单聊消息
							if (data.type == 'single' && (item.fromUserId == data.source || item
									.toUserId == data.source)) {
								item.content = data.content
								item.date = '刚刚'
							}
							break
					}
					return item
				})
			})

			this.getList()
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.posRight = (menuButtonInfo.width + 20) + 'px'
			// #endif
		},
		methods: {
			// 关闭滑块
			closeSwipe() {
				this.$refs.swipe.closeOther()
			},
			// 详情
			toDetail(item) {

				let {
					fromUserId,
					toUserId,
					name
				} = item
				let userId = toUserId == this.userId ? fromUserId : toUserId
				this.toPage('/subpack/chat/index?toUserId=' + userId + '&toUserName=' + name+'&xt='+1)

			},
			// 切换
			swipeChange() {},
			// 处理消息类型
			dealMessage(msg = '', type = 'text') {
				let ret = msg;
				switch (type) {
					case 'voice':
						ret = '语音消息';
						break
					case 'image':
						ret = '图片';
						break
					case 'map':
						ret = '位置信息';
						break
					default:
						ret = msg
				}
				return ret
			},
			// 获取用户消息
			getList() {
				uni.request({
					url: this.$api.getMsgRecord,
					data: {
						userId: this.userId
					},
					header: this.$util.getHeader(),
					success: res => {
						let data = res.data.data
						if (data) {
							this.list = data.map(item => {
								item.content = this.dealMessage(item.content, item.msgType)
								item.groupFace = item.groupFace ? this.$api.staticPath + item
									.groupFace : ''
								item.userFace = item.face ? this.$api.staticPath + item.face : ''
								return item
							})
						} else {
							this.list = []
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		height: calc(100vh - 100upx );
		background-color: #fff;

		.item {
			display: flex;
			width: 100vw;
			height: 160upx;
			padding: 30upx;
			box-sizing: border-box;
			align-items: flex-start;

			.cover {
				width: 100upx;
				height: 100upx;
				border-radius: 10upx;
				box-sizing: border-box;
				border: 2upx solid #f9f9f9;
				position: relative;

				.icon {
					width: 100%;
					height: 100%;
					border-radius: 10upx;
				}

				// .tag {
				// 	color: #fff;
				// 	width: 30upx;
				// 	height: 30upx;
				// 	font-size: 20upx;
				// 	border-radius: 50%;
				// 	background-color: red;
				// 	position: absolute;
				// 	top: -12upx;
				// 	right: -12upx;
				// 	z-index: 9;

				// 	&.empty {
				// 		width: 20upx;
				// 		height: 20upx;
				// 		background-color: #F72727;
				// 		top: -6upx;
				// 		right: -6upx;
				// 	}
				// }
			}

			.title {
				height: 100%;
				box-sizing: border-box;
				width: calc(100vw - 130upx - 60upx);
				position: relative;

				&::after {
					content: '';
					width: 100%;
					height: 2upx;
					background-color: #F6F6F6;
					position: absolute;
					left: 0;
					bottom: -30upx;
				}

				.main {
					height: 40upx;
					margin: 6upx 0 12upx;

					.text {
						color: #333;
						font-size: 32upx;
						font-weight: 600;
					}

					.time {
						color: #666;
						font-size: 24upx;
					}
				}

				.sub {
					color: #999;
					font-size: 24upx;
				}
			}
		}
	}

	.syslist {
		background-color: #fff;

		.item {
			display: flex;
			width: 100vw;
			height: 160upx;
			padding: 30upx;
			box-sizing: border-box;
			align-items: flex-start;

			.cover {
				width: 100upx;
				height: 100upx;
				border-radius: 10upx;
				box-sizing: border-box;
				border: 2upx solid #f9f9f9;
				position: relative;

				.icon {
					width: 100%;
					height: 100%;
					border-radius: 10upx;
				}

				// .tag {
				// 	color: #fff;
				// 	width: 30upx;
				// 	height: 30upx;
				// 	font-size: 20upx;
				// 	border-radius: 50%;
				// 	background-color: red;
				// 	position: absolute;
				// 	top: -12upx;
				// 	right: -12upx;
				// 	z-index: 9;

				// 	&.empty {
				// 		width: 20upx;
				// 		height: 20upx;
				// 		background-color: #F72727;
				// 		top: -6upx;
				// 		right: -6upx;
				// 	}
				// }
			}

			.title {
				height: 100%;
				box-sizing: border-box;
				width: calc(100vw - 130upx - 60upx);
				position: relative;

				&::after {
					content: '';
					width: 100%;
					height: 2upx;
					background-color: #F6F6F6;
					position: absolute;
					left: 0;
					bottom: -30upx;
				}

				.main {
					height: 40upx;
					margin: 6upx 0 12upx;

					.text {
						color: #333;
						font-size: 32upx;
						font-weight: 600;
					}

					.time {
						color: #666;
						font-size: 24upx;
					}
				}

				.sub {
					color: #999;
					font-size: 24upx;
				}
			}
		}
	}
</style>